<template>
  <div class="wapper" v-if="visible" @click="close">
    <div class="map-detail" @click.stop>
      <card-title title="当地信息" class="fix-top"></card-title>

      <div class="body">
        <div>
          <div>云南昆明市</div>
          <div>
            <img src="@/assets/screen/dl.png" alt="" />
          </div>
        </div>
        <div class="row">
          <div class="col">
            <span class="t">专家数</span>
            <span>2869人</span>
          </div>

          <div class="col">
            <span class="t">农户数</span>
            <span>13869人</span>
          </div>
        </div>
        <div class="row">
          <div class="col-3">
            <span class="t">累计服务次数</span>
            <span>2869人</span>
          </div>

          <div class="col-3">
            <span class="t">累计服务人次</span>
            <span>13869人</span>
          </div>
          <div class="col-3">
            <span class="t">累计服务时长</span>
            <span>13869人</span>
          </div>
        </div>
        <div>
          <div>昆明市</div>
          <div>
            <img src="@/assets/screen/dl.png" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { CardTitle } from "../components";
export default {
  components: {
    CardTitle,
  },
  props: {},
  data() {
    return {
      visible: false,
    };
  },
  methods: {
    show() {
      this.visible = true;
    },
    close() {
      this.visible = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.wapper {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 20;
  //   background-color: red;
}
.map-detail {
  position: absolute;
  right: 5rem;
  top: 20%;
  z-index: 20;
  //   right: 0;
  //   top: 10%;
  width: 4.35rem;
  height: 7rem;
  background-image: url("@/assets/screen/detail.png");
  background-size: 100% 100%;
}

.fix-top {
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
}

.body {
  font-size: 0.18rem;
  color: white;
  padding: 0.2rem;
}

.t {
  font-size: 0.14rem;
  color: #697699;
}

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.2rem;
  .col {
    width: 48%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .col-3 {
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .t {
      margin-bottom: 0.1rem;
    }
  }
}

.vline {
  width: 0.02rem;
  height: 0.17rem;
  background-color: #7a8aae;
}
</style>
